<template>
	<view class="toptop" :style="{'--themcolor':usethemestore.themecolor,'--themcolor2':usethemestore.themecolor2}">
		<view class="t">
			<view class="t-l">
				<image v-if="ishttpsimg" :src="useuserinfostore.userinfo.img" mode="aspectFill"></image>
				<image v-else :src="'http://127.0.0.1:3006'+useuserinfostore.userinfo.img" mode="aspectFill"></image>
			</view>
			<view class="t-r">
				<view class="t-r-t">{{useuserinfostore.userinfo.name}}</view>
				<view class="t-r-b">
					<view class="logo">
						<view class="iconfont icon-huangguan"></view> 普通用户
					</view>
				</view>
			</view>
		</view>
		<view class="b">
			<view class="b-item" v-for="i in data" :key="i.name" @click="gopath(i)">
				<view :class="i.icon "></view>
				<view class="">{{i.name}}</view>
			</view>
		</view>
	</view>
	<view class="conbox">
		<view class="orderbox">
			<view class="use-tit">
				<view class="">订单</view>
				<view class="rrr">
					<view class="">全部订单</view>
					<view class="iconfont icon-jiantouyou"></view>
				</view>
			</view>
			<view class="usebox">
				<view class="" @click="goorder(0)">
					<view class="uset">10</view>
					<view class="">全部订单</view>
				</view>
				<view class="" @click="goorder(1)">
					<view class="uset">45</view>
					<view class="">进行中</view>
				</view>
				<view class="" @click="goorder(2)">
					<view class="uset">1</view>
					<view class="">已成功</view>
				</view>
				<view class="" @click="goorder(3)">
					<view class="uset">52</view>
					<view class="">已取消</view>
				</view>

			</view>
		</view>
		<!-- 		<view class="usec">
			<view class="usec-tit">常用功能</view>
			<view class="usecbox">
				<view class="" v-for="i in 6" :key="i">
					<view class="iconfont icon-dizhi"></view>
					<view class="">地址</view>
				</view>
			</view>
		</view> -->
		<view class="option">
			<view class="line" @click="gothem">
				<view class="l ">
					<view class="iconfont icon-zhuti"></view>
					<view class="">主题</view>
				</view>
				<view class="iconfont icon-jiantouyou"></view>
			</view>
			<view class="" @click="gosz">
				<view class="l">
					<view class="iconfont icon-shezhi"></view>
					<view class="">设置</view>
				</view>
				<view class="iconfont icon-jiantouyou"></view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onShow,
	} from "@dcloudio/uni-app"
	import {computed} from 'vue'
	import themestore from '@/store/theme.js'
	import userinfostore from '@/store/user.js'
	const useuserinfostore=userinfostore()
	const usethemestore = themestore()
	const ishttpsimg=computed(()=>{
		return useuserinfostore.userinfo.img.startsWith('https')
	})
	const data = [{
			name: "地址管理",
			icon: "iconfont icon-dizhi",
			path: "/pages/address/address"
		},
		{
			name: "我的收藏",
			icon: "iconfont icon-xingxing",
			path: "/pages/product-love/product-love"
		},
		{
			name: "浏览记录",
			icon: "iconfont icon-lishixiao",
			path: "/pages/duct-history/duct-history"
		},
		{
			name: "红包卡卷",
			icon: "iconfont icon-kabao",
			path: ""
		}
	]
	onShow(() => {
		console.log(useuserinfostore.userinfo)
		uni.setTabBarStyle({
			selectedColor: usethemestore.themecolor,
		})
		switch (usethemestore.themname) {
			case "pink": {
					console.log(usethemestore.themname)
				uni.setTabBarItem({
					index: 0,
					selectedIconPath: "static/sy-pink.png"
				})
				uni.setTabBarItem({
					index: 1,
					selectedIconPath: "static/dd-pink.png"
				})
				uni.setTabBarItem({
					index: 2,
					selectedIconPath: "static/wd-pink.png"
				})
				break
			}
			case "green": {
					console.log(usethemestore.themname)
				uni.setTabBarItem({
					index: 0,
					selectedIconPath: "static/sy-green.png"
				})
				uni.setTabBarItem({
					index: 1,
					selectedIconPath: "static/dd-green.png"
				})
				uni.setTabBarItem({
					index: 2,
					selectedIconPath: "static/wd-green.png"
				})
				break
			}
			case "orange": {
					console.log(usethemestore.themname)
				uni.setTabBarItem({
					index: 0,
					selectedIconPath: "static/sy-or.png"
				})
				uni.setTabBarItem({
					index: 1,
					selectedIconPath: "static/dd-or.png"
				})
				uni.setTabBarItem({
					index: 2,
					selectedIconPath: "static/wd-or.png"
				})
				break
			}
			case "blue": {
					console.log(usethemestore.themname)
				uni.setTabBarItem({
					index: 0,
					selectedIconPath: "static/sy2.png"
				})
				uni.setTabBarItem({
					index: 1,
					selectedIconPath: "static/dd2.png"
				})
				uni.setTabBarItem({
					index: 2,
					selectedIconPath: "static/wd2.png"
				})
				break
			}
		}
	})
	const gopath = e => {
		if (!e.path) {
			return uni.showToast({
				title: "尽情期待~",
				icon: "none"
			})
		}
		uni.navigateTo({
			url: e.path
		})
	}
	const goorder = e => {
		uni.reLaunch({
			url: `/pages/dd/dd?type=${e}`
		})
	}
	const gosz = () => {
		uni.navigateTo({
			url: "/pages/sz/sz"
		})
	}
	const gothem = () => {
		uni.navigateTo({
			url: "/pages/thempage/thempage"
		})
	}
</script>

<style lang="scss" scoped>
	.option {
		height: fit-content;
		background-color: #fff;
		border-radius: 15rpx;
		width: 90%;
		margin: 20rpx auto;

		.line {
			border-bottom: 1rpx solid #eee;
		}

		>view {
			height: 90rpx;
			display: flex;
			justify-content: space-between;
			padding: 0 30rpx;
			align-items: center;

			.l {
				display: flex;
				align-items: center;
				width: fit-content;
				gap: 15rpx;
			}

			.iconfont {
				font-size: 27rpx;
			}
		}
	}

	.conbox {
		height: calc(100vh - 40vh);
		background-color: #eee;
		display: flex;
		flex-direction: column;

		.orderbox {
			height: 220rpx;
			width: 90%;
			margin: -100rpx auto 0 auto;
			background-color: #fff;
			border-radius: 15rpx;
			opacity: 0.99;
			padding: 20rpx;

			// z-index: 99;
			.use-tit {
				height: 30rpx;
				display: flex;
				justify-content: space-between;
				font-size: 30rpx;
				font-weight: 700;

				.rrr {
					display: flex;
					color: #6f6f6f;
					font-size: 24rpx;
					display: flex;
					align-items: center;

					.iconfont {
						font-size: 27rpx;
					}

				}
			}

			.usebox {
				height: 160rpx;
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				justify-items: center;
				align-items: center;

				>view {
					display: flex;
					flex-direction: column;
					gap: 5rpx;
					font-size: 26rpx;
					justify-content: center;
					align-items: center;

					.uset {
						font-size: 35rpx;
						font-weight: 700;
					}
				}
			}

		}

		.usec {
			height: 400rpx;
			width: 90%;
			margin: -100rpx auto 0 auto;
			background-color: #fff;
			border-radius: 15rpx;
			margin: 30rpx auto;
			padding: 30rpx 20rpx;
			display: flex;
			flex-direction: column;

			.usec-tit {
				height: 50rpx;
				font-size: 30rpx;
				font-weight: 700;
				display: flex;
				align-items: center;
			}

			.usecbox {
				width: 100%;
				height: calc(100% - 50rpx);
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				justify-items: center;
				align-items: center;

				>view {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					gap: 15rpx;
					font-size: 27rpx;

					.iconfont {
						font-size: 55rpx;
					}
				}
			}

		}
	}

	.toptop {
		height: 40vh;
		background: linear-gradient(to top, #eeeeee,var(--themcolor));
		overflow: hidden;
		padding: 0 40rpx;
		opacity: 0.99;

		.t {
			margin-top: 100rpx;
			height: 200rpx;
			width: 100%;
			display: flex;
			align-items: center;
			gap: 20rpx;

			.t-l {
				image {
					height: 110rpx;
					width: 110rpx;
					border-radius: 50%;
				}
			}

			.t-r {
				display: flex;
				flex-direction: column;
				gap: 10rpx;
				justify-content: center;

				.t-r-t {
					font-size: 35rpx;
					font-weight: 700;
					width: 350rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.logo {
					width: fit-content;
					padding: 5rpx 25rpx;
					font-size: 22rpx;
					background-color: #000;
					color: #ffaa00;
					border-radius: 8rpx;
					display: flex;
					align-items: center;
					gap: 5rpx;
				}
			}

		}

		.b {
			height: 180rpx;
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			justify-items: center;
			align-items: center;
			background-color: transparent;

			.iconfont {
				font-size: 45rpx;
				color: #000;
				font-weight: 700;
			}

			>view {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				gap: 15rpx;
				font-size: 30rpx;
			}
		}
	}
</style>